<template>
  <div class="container">
    <div class="el-button">1</div>
    <div class="el-button">2</div>
    <div class="el-button">3</div>
    <div class="el-button">4</div>
    <div class="el-button">5</div>
    <div class="el-button">6</div>
    <div class="el-button">7</div>
    <div class="el-button">8</div>
    <div class="el-button">9</div>
    <div class="el-button">10</div>
  </div>
</template>

<script>
export default {
  name: "Flex"
}
</script>

<style scoped>

.container {
  display: flex;
  height: 600px;
  background-color: #42b983;
  width: 900px;
  flex-wrap: wrap-reverse;
  padding: 40px;
  justify-content: ;

}
.el-button {
  display: block;
  width: 200px;
  height: 100px;
  background-color: #f56c6c;
}
</style>